/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import styles from '../../routes/BusinessData.less';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';
import {Card, Icon, Tooltip, Row, Col} from 'antd';


const UserPurchase = ({data, dispatch ,loading}) => {
  let state={
      chartId:'box',
      sourceName : ['POS&Tmall购买人数','只在POS购买','只在Tmall购买'],
      seriesName : ['PTValueList','PValueList','TValueList'],
      dayIdList:[],
      seriesData:[],
      reData:data,
      cname:'用户购买渠道分布'
  }

  let seriesData = [];

  for(var i=0;i<state.seriesName.length;i++){
      seriesData.push({
        name:state.sourceName[i],
        type:'bar',
        stack:'总量',
        barWidth: 120,
        itemStyle : { 
            normal: {
                label : {
                    show: true,
                    formatter:function(s,k){
                        if(s.value == '0'){
                            return ''
                        }
                    }
                }
            }
        },
        data:data[state.seriesName[i]]
      })
    }

  
  let option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        
        legend: {
            data:state.sourceName,
            textStyle:{
                color:"#fff"
            },
            y:10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis:  {
            type: 'value',
          splitLine:{
      　　　　show:false
      　　},
        axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#1790cf",
                    width:1
                }
            }
        },
        xAxis: {
            type: 'category',
            data: state.dayIdList,
            splitLine:{
      　　　　show:false
      　　},
        axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#1790cf",
                    width:1
                }
            }
        },
        series: seriesData
    };
  function exExcel(){
    var title = ['日期','用户总数','手机号数量','微信粉丝数量','只在天猫购买数量','天猫&POS购买数量','只在POS购买数量','未产生购买','微信粉丝未注册手机号人数','微信粉丝注册手机号人数'];
        var datas = [],name;
        for(var i=0;i<state.dayIdList.length;i++){
          var arr = [];
          arr.push(state.dayIdList[i]);
          for(var j=0;j<state.seriesName.length;j++){
            name = state.seriesName[j];
            arr.push(data[name][i]);
          }
          datas.push(arr)
        }

        if(datas == '')  
            return;  
        toExcel(title, "按年份看用户购买渠道分布", datas);
  }


  return (
    < div className = {styles.box}>
      < h3 >按年份看用户购买渠道分布&nbsp;
                    <Tooltip placement="right" title="截止至当年，各个渠道用户购买情况分布。">
                      <Icon type="question-circle-o" className={styles.anticon}/>
                    </Tooltip>
      < /h3> 
      < div className = {styles.box_wrap} id="zz_box">
      <div className={styles.downloads}>
        <span className={styles.dimg} onClick={downImg.bind(this,'zz_box','按年份看用户购买渠道分布')}></span>
                <span className={styles.desl} onClick={exExcel.bind(this)}></span>
      </div>
      < ReactEcharts option = {option} showLoading={loading}/></div> < /div>
  );
};

UserPurchase.propTypes = {
    // data: PropTypes.array
};

export default connect()(UserPurchase);